<template>
    <div>
          <page-header @toLastPage="toLastPage">
       <template v-slot:title>
       新的朋友
      </template>
      <template v-slot:right>
        <button class="addBtn" @click="toAddFreinds">添加朋友</button>
      </template>
        </page-header>

         <div class="addinput" @click="toAddPage">
        <div>
            <van-icon name="search" />
            微信号/邮箱号
        </div>
    </div>

    <div class="addPhone flex f-center">
        <div class="left"><van-icon name="phone" /></div>
        <div class="center">添加手机联系人</div>
        <div class="right"><van-icon name="arrow" /></div>
    </div>

    <div class="date">三天前</div>

    <div class="addList">
        <div v-for="(item,index) in applyList" :key="index" class="wrapper">
            <chat-list :data=item @addFriend='addFriend'></chat-list>
        </div>
    </div>
    </div>
</template>
<script>
import pageHeader from '../common/pageHeader';
import chatList from '../chat/chatList';
import {Meteor} from 'meteor/meteor';
import { apply,image,user } from '../../../api/collections/index';
export default {
    components:{
        pageHeader,
        chatList
    },
     meteor: {
    $subscribe: {
      'userInf': []
    },
    applyList(){
        const id = sessionStorage.getItem('user')
        const arr = apply.find({A_FriendID:id}).fetch()
        return arr.map((e)=>{
            const userInf = user.findOne({_id:e.A_UserID})
            if(userInf){
                const avatar = image.findOne({_id:userInf.avatarId})
                if(avatar){
                return {
               _id:e._id,
               beizhu:e.A_beizhu,
               userId:e.A_FriendID,
               friendId:e.A_UserID,
               status:e.A_Status,
               name:userInf.nickname,
               lastMsg:e.A_Message,
               isAdd:true,
               avatar:avatar.base64,
               noReadCount:0
           }
                }
            }
        })
    },
    },
    data() {
        return {
        }
    },
    methods:{
         toLastPage(){
            this.$router.go(-1)
        },
         toAddPage(){
            this.$router.push('/addPage')
        },
        toAddFreinds(){
            this.$router.push('/addFriend')
        },
        addFriend(e){
            // 修改申请表已添加
            Meteor.call('apply.befriend',{
              _id:e._id
            })
            let userInf = {}
            let friendInf = {}
            // 获取user信息
            const user1 = user.findOne({_id:e.userId})
            userInf = {
                        F_UserID:e.friendId,
                        F_FriendID:e.userId,
                        F_FriendAvatarId:user1.avatarId,
                        F_beizhu:e.beizhu,
                        F_FriendType:[],
                        F_isBlock:false,
                        F_date:new Date().getTime()
                        }
                        Meteor.call('friends.create',userInf)
            // 获取好友信息
            const user2 = user.findOne({_id:e.friendId})

                            friendInf = {
                                F_UserID:e.userId,
                                F_FriendID:e.friendId,
                                F_FriendAvatarId:user2.avatarId,
                                F_beizhu:'',
                                F_FriendType:[],
                                F_isBlock:false,
                                F_date:new Date().getTime()
                            }
                            Meteor.call('friends.create',friendInf)
        }
    }
}
</script>
<style scoped>
    .addBtn{
        position: relative;
        right: -.5rem;
        background: none;
        border: none;
        outline: none;
        font-size: .6rem;
        padding: .5rem;
    }
    .addBtn:active{
        background-color: #ccc;
    }
     .addinput{
        background-color: #fff;
        margin:2rem .5rem .5rem;
        text-align: center;
        font-size: .6rem;
        line-height: 1.2rem;
        color: #999;
    }
    .addPhone{
        padding: .4rem 0;
        background-color: #fff;
    }
    .left{
        position: relative;
        top:.2rem;
        text-align: center;
        width: 2rem;
        color: #07C160;
        font-size: 1rem;
    }
    .center{
        flex: 1;
        text-align: left;
        font-size: .6rem;
    }
    .right{
        width: 1rem;
        font-size: .6rem;
    }
    .date{
        font-size: .6rem;
        padding: .5rem;
    }
    .wrapper{
        background-color: #fff;
    }
</style>